@extends('layouts.back_stage')
@section('content')
    <style>
        .xing{color:red;}
        .form_ul{width:100%;height:30px;margin-bottom:20px;float:left;}
        .form_li{width:193px;line-height:30px;margin-right:10px;float:left;font-size:14px;}
        .form_inp{width:130px;height:30px;line-height:30px;font-size:14px;float:right;outline:none;border:1px solid #cfdada;background:#fff;border-radius:2px;padding:6px 12px;color:#555;box-shadow: none;}
        .form_add{margin:20px 0 30px 500px;}
        .colorName,.sizeName{padding:3px 10px;margin-right:5px;margin-bottom:7px;font-size: 14px;}
        .editName,.editSizeName{padding:2px 10px;margin-bottom:5px;margin-right:5px;border:1px solid #d5d5d5;background:#fff;}
        .addColor,.addSize{width:70px;height:24px;outline:none;font-size: 14px;}
    </style>
    <div class="container">
        <div class="row">
            <div style="margin:30px;"><h3 >@if($infos->status===0)添加@else修改@endif订货会商品资料</h3></div>
            <div style="width:95%;margin-left:40px;">
                <div class="form-group">
                    <ul class="form_ul">
                        <li class="form_li" style="width:220px;"><span class="xing">*</span>订货编号：<input class="form_inp order_num" maxlength="10" value="{{$infos->order_num}}" type="text" autocomplete="off" autocorrect="off" placeholder="请输入订货编号" /></li>
                        <li class="form_li"><span class="xing">*</span>款号：<input class="form_inp girard" maxlength="15" value="{{$infos->girard}}" type="text" autocomplete="off" autocorrect="off" placeholder="请输入款号" /></li>
                        <li class="form_li"><span class="xing">*</span>描述：<input class="form_inp description"  value="{{$infos->description}}" maxlength="20" type="text" autocomplete="off" autocorrect="off" placeholder="请输入描述" /></li>
                        <li class="form_li"><span class="xing">*</span>价格：<input class="form_inp price" maxlength="15" value="{{$infos->price}}" type="text" autocomplete="off" autocorrect="off" placeholder="请输入价格" /></li>
                    </ul>
                    <ul class="form_ul">
                        <li class="form_li" style="width:830px;"><span class="xing">*</span>成分：<input class="form_inp ingredient" style="width:740px;" value="{{$infos->ingredient}}" type="text" autocomplete="off" autocorrect="off" placeholder="请输入成分" /></li>
                    </ul>
                </div>
                <div class="form-group">
                    <ul class="form_ul" style="height:auto;">
                        <li style="float:left;line-height:30px;margin-right:45px;"><span class="xing">*</span>颜色：</li>
                        <span class="color_span" style="float:left;width:auto;max-width:85%;">
                            @if(count($color_arr))
                                @foreach($color_arr as $k => $v)
                                <a class="btn btn-success btn-sm colorName" href="javascript:;"><span class="nameIS" style="margin-right:10px;">{{$v}}</span><i class="fa fa-times delcolor"></i></a>
                                @endforeach
                            @endif
                                @if(count($color_arr)==0)
                                <a class="btn btn-defult btn-sm editName" href="javascript:;"><input class="addColor" type="text" style="border:0;" maxlength="5" placeholder="颜色"><i class="fa fa-times delcolor"></i></a>
                                @endif
                            <a class="btn btn-primary btn-sm addFuBtn" href="javascript:;" style="margin-bottom:6px;"><span>+</span></a>
                        </span>
                    </ul>
                </div>
                <div class="form-group">
                    <ul class="form_ul" style="height:auto;">
                        <li style="float:left;line-height:30px;margin-right:45px;"><span class="xing">*</span>尺码：</li>
                        <span class="color_span" style="float:left;width:auto;max-width:85%;">
                            <?php $size_arr=explode(',',$infos->size)?>
                            @if(!empty($infos->size) && count($size_arr))
                            @foreach($size_arr as $k => $v)
                                <a class="btn btn-success btn-sm sizeName" href="javascript:;"><span class="sizeIS" style="margin-right:10px;">{{$v}}</span><i class="fa fa-times delSize"></i></a>
                            @endforeach
                                <a class="btn btn-primary btn-sm addSizeBtn" href="javascript:;" style="margin-bottom:6px;"><span>+</span></a>
                            @else
                                <a class="btn btn-success btn-sm sizeName" href="javascript:;"><span class="sizeIS" style="margin-right:10px;">F</span><i class="fa fa-times delSize"></i></a>
                                <a class="btn btn-success btn-sm sizeName" href="javascript:;"><span class="sizeIS" style="margin-right:10px;">S</span><i class="fa fa-times delSize"></i></a>
                                <a class="btn btn-success btn-sm sizeName" href="javascript:;"><span class="sizeIS" style="margin-right:10px;">M</span><i class="fa fa-times delSize"></i></a>
                                <a class="btn btn-success btn-sm sizeName" href="javascript:;"><span class="sizeIS" style="margin-right:10px;">L</span><i class="fa fa-times delSize"></i></a>
                                <a class="btn btn-success btn-sm sizeName" href="javascript:;"><span class="sizeIS" style="margin-right:10px;">XL</span><i class="fa fa-times delSize"></i></a>
                                <a class="btn btn-primary btn-sm addSizeBtn" href="javascript:;" style="margin-bottom:6px;"><span>+</span></a>
                            @endif
                        </span>
                    </ul>
                </div>

                <div class="form-group"><button type='button' class='form_add btn btn-info' onclick="tiJiao({{$id}})">保存</button></div>
            </div>
        </div>
    </div>
    <script>
        /*价格*/
        $(".price").bind("input","onpropertychange",function(){
            $(this).val($(this).val().replace(/[^\d.]/g,""));
            $(this).val($(this).val().replace(/\.{2,}/g,"."));
            $(this).val($(this).val().replace(/^\./g,""));
            $(this).val($(this).val().replace(".","$#$").replace(/\./g,"").replace("$#$","."));
            $(this).val($(this).val().replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'));
            if($(this).val().indexOf(".")< 0 && $(this).val() !=""){
                $(this).val(parseFloat($(this).val()));
            }
        });
        /*订单编号*/
//        $(".order_num").bind("input","onpropertychange",function(){
//            $(this).val($(this).val().replace(/[^\d]/g,""));
//        });

        /*颜色操作*/
        $(document).on("click",".delcolor",function(){
            console.log($(".colorName").length)
            if($(".colorName").length<=0){
                alert(2)
            }
            $(this).parent().remove();
        });
        /*添加颜色*/
        $(".addFuBtn").click(function(){
            if($(".colorName").length>9){
                $(".faceImg").attr("src","/img/weep.png");
                $(".oHandle").text("最多添加10个颜色");
                $(".oSuccess").show(0).delay(1000).hide(0);
            }else{
                if( $(this).prev("a").hasClass("editName") ){
                    if($(".editName").children(".addColor").val()=='' ){
                        $(".faceImg").attr("src","/img/weep.png");
                        $(".oHandle").text("先填写颜色再添加");
                        $(".oSuccess").show(0).delay(1000).hide(0);
                    }else{
                        var names=$(".editName").children(".addColor").val();
                        $(".addColor").val('');
                        $(".editName").before('<a class="btn btn-success btn-sm colorName" href="javascript:;"><span class="nameIS" style="margin-right:10px;">'+names+'</span><i class="fa fa-times delcolor"></i></a>');
                        if($(".colorName").length>9){
                            $(".editName").remove();
                        }
                    }
                }else{
                    $(this).before('<a class="btn btn-defult btn-sm editName" href="javascript:;"><input class="addColor" type="text" style="border:0;" maxlength="5" placeholder="颜色"><i class="fa fa-times delcolor"></i></a>')
                }
            }
        });
        /*颜色失去焦点*/
        $(document).on("blur",".addColor",function(){
            if($(this).val().trim()!=''){
                var names=$(this).val().trim();
                $(".addColor").val('');
                $(".editName:last").before('<a class="btn btn-success btn-sm colorName" href="javascript:;"><span class="nameIS" style="margin-right:10px;">'+names+'</span><i class="fa fa-times delcolor"></i></a>');
                if($(".colorName").length>9){
                    $(".editName").remove();
                }
            }
        });

        /*尺码操作*/
        $(document).on("click",".delSize",function(){
            $(this).parent().remove();
        });
        /*添加尺码*/
        $(".addSizeBtn").click(function(){
            if($(".sizeName").length>9){
                $(".faceImg").attr("src","/img/weep.png");
                $(".oHandle").text("最多添加10个尺码");
                $(".oSuccess").show(0).delay(1000).hide(0);
            }else{
                if( $(this).prev("a").hasClass("editSizeName") ){
                    if($(".editSizeName").children(".addSize").val()=='' ){
                        $(".faceImg").attr("src","/img/weep.png");
                        $(".oHandle").text("先填写尺码再添加");
                        $(".oSuccess").show(0).delay(1000).hide(0);
                    }else{
                        var names=$(".editSizeName").children(".addSize").val();
                        $(".addSize").val('');
                        $(".editSizeName").before('<a class="btn btn-success btn-sm sizeName" href="javascript:;"><span class="sizeIS" style="margin-right:10px;">'+names+'</span><i class="fa fa-times delSize"></i></a>');
                        if($(".sizeName").length>9){
                            $(".editSizeName").remove();
                        }
                    }
                }else{
                    $(this).before('<a class="btn btn-defult btn-sm editSizeName" href="javascript:;"><input class="addSize" type="text" style="border:0;" maxlength="5" placeholder="尺码" onkeyup="toUpperCase(this)"><i class="fa fa-times delSize"></i></a>')
                }
            }
        });
        /*尺码失去焦点*/
        $(document).on("blur",".addSize",function(){
            if($(this).val().trim()!=''){
                var names=$(this).val().trim();
                $(".addSize").val('');
                $(".editSizeName:last").before('<a class="btn btn-success btn-sm sizeName" href="javascript:;"><span class="sizeIS" style="margin-right:10px;">'+names+'</span><i class="fa fa-times delSize"></i></a>');
                if($(".sizeName").length>9){
                    $(".editSizeName").remove();
                }
            }
        });
        /*尺码变大写*/
        function toUpperCase(obj) {
            obj.value = obj.value.toUpperCase()
        }
        /*提交*/
        function tiJiao(id) {
            var order_num=$(".order_num").val();
            if(order_num==''){
                tips("订货编号不能为空");
                return false;
            }
            var girard=$(".girard").val();
            if(girard==''){
                tips("款号不能为空");
                return false;
            }
            var description=$(".description").val();
            if(description==''){
                tips("描述不能为空");
                return false;
            }
            var price=$(".price").val();
            if(price==''){
                tips("价格不能为空");
                return false;
            }
            var ingredient=$(".ingredient").val();
            if(ingredient==''){
                tips("成分不能为空");
                return false;
            }
            var colors=getInfo(".nameIS");
            var size=getInfo(".sizeIS");
            if(colors==''){
                tips("颜色至少填写一个");
                return false;
            }
            if(size==''){
                tips("尺码至少填写一个");
                return false;
            }

            $.ajax({
                url: '/other-order/increase-product-save',
                type: 'post',
                data: {
                    id: id,
                    order_num: order_num,
                    girard: girard,
                    description: description,
                    price: price,
                    ingredient: ingredient,
                    colors: colors,
                    size: size
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                },
                dataType: 'json',
                success: function (data) {
                    if (data.success) {
                        $(".faceImg").attr("src", "/img/laugh.png");
                        $(".oHandle").text("保存成功");
                        $(".oSuccess").show(0).delay(800).hide(0);
                        setTimeout(function(){
                            window.location.href='/other-order/other-product-list';
                        },800)
                    } else {
                        $(".faceImg").attr("src", "/img/weep.png");
                        $(".oHandle").text(data.msg);
                        $(".oSuccess").show(0).delay(1000).hide(0);
                    }
                }
            })
        }

        /*tips*/
        function tips(txt){
            $(".faceImg").attr("src","/img/weep.png");
            $(".oHandle").text(txt);
            $(".oSuccess").show(0).delay(1000).hide(0);
        }
        /*获取颜色尺码*/
        function getInfo(id){
            var ss1='';
            for(var aa=0;aa<$(id).length;aa++){
                var ss2=$(id).eq(aa).text().trim();
                if(ss2==''){
                    ss2=0;
                }
                ss1=ss1+ss2+',';
            }
            return ss1.substr(0, ss1.length - 1);
        }
    </script>
@endsection
